<template>
    <div class="page-search-form">
        <el-form
            ref="pageSearchForm"
            :inline="true"
            :model="pageSearchData"
            label-position="right"
            :label-width="labelWidth"
        >
            <el-form-item v-for="(item, index) in pageSearchFrame" :key="index" :label="item.label" :prop="item.key">
                <cell-render :cell-render-frame="item" :cell-render-data="pageSearchData"></cell-render>
            </el-form-item>
        </el-form>
        <div style="text-align: right">
            <el-button :size="frameConfig.btnSize" type="primary" icon="el-icon-search" @click="buttonSearch" plain>
                查询
            </el-button>
            <el-button :size="frameConfig.btnSize" type="warning" icon="el-icon-refresh" @click="resetForm" plain>
                重置
            </el-button>
        </div>
    </div>
</template>
<script>
import CellRender from '@/components/Page/CellRender'
const QUERY_SUCCESS = 'query-success'
class QueryCache {
    constructor(pageKey, isCache) {
        this.pageKey = pageKey
        this.isCache = isCache
    }
    setItem(pageSearchData) {
        if (this.isCache) {
            sessionStorage.setItem(this.pageKey, JSON.stringify(pageSearchData))
        }
    }
    getItem() {
        if (this.isCache) {
            return JSON.parse(sessionStorage.getItem(this.pageKey))
        }
    }
}
export default {
    components: {
        CellRender
    },
    inheritAttrs: false,
    queryCache: null,
    props: {
        pageSearchFrame: {
            type: Array
        },
        searchFun: {
            type: Function
        },
        preSearch: {
            type: Function,
            default: () => true
        },
        labelWidth: {
            type: String,
            default: '100px'
        },
        beforeRestForm: {
            type: Function,
            default: () => {}
        },
        isCache: {
            type: Boolean,
            default: true
        },
        pageSearchData: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    emits: [QUERY_SUCCESS],
    data() {
        return {
            frameConfig: { gutter: 20, btnSize: 'mini' },
            pageKey: ''
        }
    },
    created() {
        this.pageSearchFrame
            .filter((v) => v.key && !this.pageSearchData.hasOwnProperty(v.key))
            .forEach((v) => {
                if (v.frameType == 'upload') {
                    this.$set(this.pageSearchData, v.key, [])
                } else {
                    this.$set(this.pageSearchData, v.key, null)
                }
            })
        this.$nextTick(function () {
            this.pageKey = this.getFilter()
            this.$options.queryCache = new QueryCache(this.pageKey, this.isCache)
            Object.assign(this.pageSearchData, this.$options.queryCache.getItem())
            this.onSearch()
        })
    },
    methods: {
        buttonSearch() {
            this.onSearch()
        },
        onSearch() {
            let pageSearchData = this.getQueryData()
            if (!this.preSearch(pageSearchData)) {
                return
            }
            this.searchFun(pageSearchData)
                .then((res) => {
                    this.$emit(QUERY_SUCCESS, res)
                })
                .finally(() => {
                    this.$nextTick(() => {
                        this.$options.queryCache.setItem(this.pageSearchData)
                    })
                })
        },
        resetForm() {
            //渲染组件
            this.$refs.pageSearchForm.resetFields()
            this.beforeRestForm()
            this.onSearch()
        },
        getFilter() {
            var str = this.$router.history.current.path
            let strIndex = str.lastIndexOf('/')
            return 'filter_' + str.substring(strIndex + 1) + '_' + this.searchFun.name
        },
        getQueryData() {
            return this.pageSearchData
        }
    }
}
</script>
<style lang="scss">
.page-search-form {
    font-size: 12px !important;
    .el-select-dropdown__item {
        font-size: 12px !important;
        height: 29px !important;
        line-height: 29px !important;
    }
    .el-form--inline .el-form-item {
        margin-right: -2px;
    }
    .el-form-item {
        margin-bottom: 4px;
        .el-form-item__label {
            font-size: 12px;
        }
    }
    .btn-group {
        margin-left: 50px;
    }
    .el-select,
    .el-input {
        width: 170px;
    }
    .el-form-item--mini.el-form-item,
    .el-form-item--small.el-form-item {
        margin-bottom: 10px !important;
    }
    .radio .el-radio__label {
        display: none !important;
    }
}
</style>
